<script lang="ts" setup>
import { nextTick, onMounted, reactive, ref } from "vue";
import dragResize from "/@/views/base/power-station-power-info/component/drag-resize.vue";
import stationTree from "/@/views/base/power-station-power-info/component/station-tree.vue";
import PowerProductionList from "/@/views/base/power-production-index/component/power-production-list.vue";
const PowerProductionTableRef = ref();
const planManageState = reactive({
  asideWidth: 300,
  dragIng: false,
  isStation: false,
  queryParam: { powerCode: "" },
  loadUserTable: () => {
    PowerProductionTableRef.value.getPowerProductionTableRef().loadTable();
  },
});
const handleNodeClick = function (data: any, node: any, tree: any) {
  console.log("xxx", data, node, tree);
  if (data.id.indexOf("info-") != -1) {
    planManageState.queryParam.powerCode = data.powerTypeCode;
    console.log(data.powerTypeCode);
    nextTick(() => planManageState.loadUserTable());
    planManageState.isStation = true;
  }
};
</script>
<template>
  <jxtech-basic-header></jxtech-basic-header>
  <el-container>
    <el-aside :width="`${planManageState.asideWidth}px`" class="power-aside">
      <stationTree
        ref="stationTreeRef"
        defaultSelectStation
        @handleNodeClick="handleNodeClick"
      ></stationTree>
      <dragResize
        v-model:asideWidth="planManageState.asideWidth"
        v-model:dragIng="planManageState.dragIng"
      ></dragResize>
    </el-aside>
    <el-main style="padding: 0"
      ><power-production-list
        ref="PowerProductionTableRef"
        :query-param="planManageState.queryParam"
      ></power-production-list
    ></el-main>
  </el-container>
</template>
